<style type="text/css">
    .myClass{
        background-color:yellow;
        color:red;
    }
</style>

<h1>数据绑定 演示</h1>
<hr/>
<h2>单项绑定</h2>
<p>姓名:{{user.name}}</p>
<p>年龄:{{user.age}}</p>
<p>婚否:{{user.married}}</p>
<p>{{user.name}} 的年龄是 {{user.age}}</p>
<p>{{user.name + ' 的年龄是 ' + user.age}}</p>
<p>{{user.name}} 去年 {{user.age-1}} 岁</p>
<p>假设某种申请，资质:年龄>18岁，已婚, {{user.name}} 的情况: {{user.age>18 && user.married}}</p>

<hr/>
<h2>双项绑定</h2>
<form>
    Name:<input type="text" [(ngModel)]="user.name"/>
    <br/>
    Age:<input type="text" [(ngModel)]="user.age">
    <br/>
    Married:<input type="text" [(ngModel)]="user.married">
   <!-- <input type="radio" name="married" >未婚
    <input type="radio" name="married" checked="checked">已婚-->
</form>

<hr/>
<h2>ngIf 的使用</h2>
<small>思路：如果符合条件，显示图片；如果不符合条件，显示包含提示信息的段落。</small>
<img src="./public/images/accept.png" *ngIf="user.age>18 && user.married"/>
<p style="color: red;" *ngIf="!(user.age>18 && user.married)">当前用户信息不符合申请资质...</p>
<br/>

<hr/>
<h2>ngFor 的使用</h2>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Married</th>
    </tr>
    <tr *ngFor="let user of userArray;let idx = index" [ngClass]="{myClass:idx==0}">
        <td>{{idx}} - {{user.name}}</td>
        <td>{{user.age}}</td>
        <td>{{user.married}}</td>
    </tr>
</table>
